import { useState } from 'react';
import { useFormStatus } from 'react-dom'
function SubmitButton() {
    const { pending } = useFormStatus();
    return (
        <button type='submit' disabled={pending}>{pending ? '提交中...' : '提交'}</button>
    )
}
function App() {
    const [message, setMesasge] = useState('');
    //获取表单的提交状态
    const { pending } = useFormStatus();

    const formAction = async (formData) => {
        const name = formData.get('name');
        const email = formData.get('email');
        try {
            await new Promise(resolve => setTimeout(resolve, 2000));
            setMesasge(`表单数据:name:${name},email:${email}`);
        } catch (error) {
            console.log(error);
        }
    }
    return (
        <div>
            <form action={formAction}>
                <div>
                    <label>姓名:</label>
                    <input type='text' id="name" name="name" required disabled={pending} />
                </div>
                <div>
                    <label>邮箱:</label>
                    <input type='text' id="email" name="email" required disabled={pending} />
                </div>
                <SubmitButton />
            </form>
            <div>{message}</div>
        </div>
    )

}
export default App;
/**
 * 表单提交 
 * 以前本来就有两种思路
 * 1.非受控组件  ref
 * 2.使用受控组件 state
 */